<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 600px;
                margin: 100px auto;
            }

            .message {
                display: inline-block;
                font-size: 12px;
                color: gray;
                background: url(./pic/mess.png) no-repeat;
                padding-left: 20px;
            }

            .wrong {
                color: red;
                background: url(pic/wrong.png) no-repeat;
            }

            .right {
                color: green;
                background: url(pic/right.png) no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="register">
            <input type="password" class="ipt" />
            <p class="message">请输入6~16位密码</p>
        </div>
        <script type="text/javascript">
            var ipt = document.querySelector('.ipt');
            var message = document.querySelector('.message');
            ipt.onblur = function() {
                if (this.value.length < 6 || this.value.length > 16) {
                    message.className = 'message wrong';
                    message.innerHTML = '请按要求输入密码';
                } else {
                    message.className = 'message right';
                    message.innerHTML = '密码符合要求';
                }
            }
        </script>
    </body>
</html>
